<template>
    <view class="pb-safe-area">
        <view class="p-4 flex flex-column grid-gap-4" v-if="list.length > 0">
            <view class="bg-white p-4 rounded-4 flex flex-center grid-gap-2" v-for="(item, index) in list" :key="index"
            @tap="clickItem(item)">
                <image :src="item.headimg" mode="scaleToFill" class="rounded-4" style="width: 60px;height: 60px;" />
                <view class="flex-1 flex flex-column grid-gap-2">
                    <view class="flex flex-y-center grid-gap-2">
                        <x-tag type="primary" bg v-if="item.technician_id">
                            <text class="h10 font-weight-500 text-nowrap">{{WebConfigStore.replaceIndustryPersonnelName('技师')}}</text>
                        </x-tag>
                        <text class="text-primary font-weight-600 flex-1">{{ item.nickname }}</text>
                        <x-tag :type="item.state == 1 ? 'success' : 'danger'">{{ item.state == 1 ? '正常' : '冻结'
                            }}</x-tag>
                    </view>
                    <view class="flex flex-x-space-between">
                        <text class="h10 font-weight-600" v-if="item.mobile">{{ item.mobile }}</text>
                        <text class="h10 text-placeholder" v-else>未绑定手机号</text>
                        <text class="h10 text-placeholder">{{ item.create_time }}</text>
                    </view>
                </view>
            </view>
            <x-more :status="loading" @load="getList()"></x-more>
        </view>
        <view v-else class="vh-50 flex flex-center">
            <x-empty type="data" text="空空如也~"></x-empty>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue';
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { $page, $api } from '@/utils';
import { useWebConfigStore } from '@/stores';
const WebConfigStore=useWebConfigStore();
const search = ref({
    page: 1
});
const list = ref([]);
onLoad(() => {
    getList();
})
onReachBottom(() => {
    getList();
})
const loading = ref('loadmore');
const getList = () => {
    if (loading.value === 'loading' || loading.value === 'nomore') return;
    loading.value = 'loading';
    loading.value = 'loading';
    $api.Dealer.people(search.value).then((data: any) => {
        list.value = [...list.value, ...data.data];
        search.value.page++;
        if (data.current_page >= data.last_page) {
            nextTick(() => {
                loading.value = 'nomore';
            })
        }
    }).catch(() => {
        nextTick(() => {
            loading.value = 'nomore';
        })
    }).finally(() => {
        if (loading.value === 'loading') {
            loading.value = 'loadmore';
        }
    })
}
const clickItem=(item:any)=>{
    if(item.technician_id){
        $page.open('/pages/technician/details?id='+item.technician_id)
    }
}
</script>

<style lang="scss" scoped></style>
